<template>
    <div class="container" v-if="!showDetail">
      <div class="header">
        <div class="title">花型列表</div>
      </div>
      <el-table stripe v-loading="loading" :data="tableData">
        <el-table-column prop="id" label="id" width="100"></el-table-column>
        <el-table-column prop="title" label="中文名称" width="150"></el-table-column>
        <el-table-column prop="name" label="英文名称" width="150"></el-table-column>
        <el-table-column prop="image" label="图片" width="150">
          <template v-if="scope.row.image" slot-scope="scope">
            <el-image :src="scope.row.image" :preview-src-list="imgSrcList" style="max-height: 50px; max-width: 100px;">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="video" label="视频动画" width="150"></el-table-column>
        <el-table-column prop="description" label="描述" min-width="200" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column fixed="right" width="150" label="操作">
          <template slot-scope="scope">
            <el-button @click.prevent="handleEdit(scope.row)" type="primary" plain size="mini">编辑</el-button>
            <el-button
              @click.prevent="handleDelete(scope.row)"
              type="danger"
              plain
              size="mini"
              v-permission="{ permission: '删除花型', type: 'disabled' }"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :background="true"
          :page-size="pageCount"
          :current-page="currentPage"
          v-if="refreshPagination"
          layout="prev, pager, next, jumper"
          :total="totalNums"
        ></el-pagination>
      </div>
      
    </div>
    <!--  创建/编辑分类弹窗  -->
    <edit v-else :isCreate="isCreate" :flowerId="flowerId" @editClose="editClose"></edit>
  </template>
  
  <script>
  import FlowerModel from '@/model/flower'
  import Edit from './edit'
  
  export default {
    components: {
        Edit,
    },
    data() {
      return {
        showDetail: false,
        display: true,
        tableData: [],
        flowerId: 0,
        imgSrcList: [], // 用于大图预览
        totalNums: 0,
        currentPage: 1,
        pageCount: 10,
        refreshPagination: true,
        isCreate: false,
      }
    },
    async created() {
      this.loading = true
      this.getLists()
      this.loading = false
    },
    methods: {
      async getLists() {
        const page = this.currentPage - 1
        const count = this.pageCount
        const flowers = await FlowerModel.getList(page, count, this.root)
        this.tableData = flowers.items
        this.totalNums = flowers.total
        this.initImgSrcList()
      },
      // 切换table页
      async handleCurrentChange(val) {
        this.imgSrcList = []
        this.currentPage = val
        this.loading = true
        this.getCategories()
        this.loading = false
      },
      initImgSrcList() {
        this.tableData.forEach(item => {
          if (!item.image) {
            return
          }
          this.imgSrcList.push(item.image)
        })
      },
      handleEdit(val) {
        this.flowerId = val.id
        this.isCreate = false
        this.showDetail = true
      },
      handleDelete(val) {
        let res
        this.$confirm('此操作将永久删除该花型，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          try {
            this.loading = true
            res = await FlowerModel.delete(val.id)
          } catch (e) {
            this.loading = false
            console.error(e)
          }
          if (res.code < window.MAX_SUCCESS_CODE) {
            this.loading = false
            if (this.totalNums % this.pageCount === 1 && this.currentPage !== 1) {
              this.currentPage--
            }
            this.getLists()
            this.$message({
              type: 'success',
              message: `${res.message}`,
            })
          } else {
            this.loading = false
            this.$message.error(`${res.message}`)
          }
        })
      },
      editClose() {
      this.showDetail = false
      this.getLists()
    },
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .container {
    padding: 0 30px;
  
    .header {
      display: flex;
      align-items: center;
  
      .title {
        height: 59px;
        line-height: 59px;
        color: $parent-title-color;
        font-size: 16px;
        font-weight: 500;
      }
    }
  
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin: 20px;
    }
  }
  </style>
  